<!DOCTYPE html>
<html class='no-js' lang='en'>

<head>
    <meta charset='utf-8'>
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
    <title>湘北高中选修课报名登录</title>
    <meta content='lab2023' name='author'>
    <meta content='' name='description'>
    <meta content='' name='keywords'>
    <link href="/css/application-a07755f5.css" rel="stylesheet" type="text/css"/>
    <link href="/css/iconfont.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="/css/jquery-ui-1.8.16.custom.css">
    <link rel="stylesheet" href="/css/ui.jqgrid.css">
    <link rel="stylesheet" href="/css/tip-yellowsimple.css">
    
    <style>
        .loginbox {
            background-color: rgba(255, 255, 255, 0.5);
        }
        
        body {
            background: url("/images/bg2.jpg") center top no-repeat;
            background-size: cover;
            padding: 0;
        }
        
        #tip , #tip_loginErr {
            display: none;
        }
       
    </style>
</head>

<body class=''>
<div class="container">
    <h1>湘北高中选修课登录系统</h1>
    <div class="row loginbox">
        <div class="col-lg-5">
            <h2>登录</h2>
            <hr>
            <form id="loginForm">
                <p>
                    学号:
                </p>
                <p>
                    <input type="text" class="form-control" id="username" name="sid">
                </p>
                <!--警告框-->
                <div>
                    <div class="alert alert-danger" role="alert" id="tip">学号必须是6位数字</div>
                </div>
                
                <p>
                    密码:
                </p>
                <p>
                    <input type="password" class="form-control" name="password">
                </p>
                <!--警告框-->
                <div>
                    <div class="alert alert-danger" role="alert" id="tip_loginErr"></div>
                </div>
                <p>
                    <input type="button" class="btn btn-success" value="登录" disabled id="submitbtn">
                </p>
            </form>
        </div>
    </div>
</div>


<!-- Javascripts -->
<script src="/js/lib/jquery-1.10.min.js" type="text/javascript"></script>
<script src="/js/lib/bootstrap.min.js" type="text/javascript"></script>
<script>
  //  登录验证
  var $usernameInput = $('#username')
  var $tip = $('#tip')
  var $tip_loginErr = $('#tip_loginErr')
  var $submitbtn = $('#submitbtn')
  var $loginForm = $('#loginForm')
  
  //    学号的输入框blur事件监听验证学号的格式 格式正确才能点击按钮登录
  $usernameInput.blur(function () {
    var username = $(this).val()
    console.log(username)
    //  正则验证是否是九尾数字
    var reqsult = /^[\d]{9}$/.test(username)
    if (!reqsult) {
      $tip.show()
      $submitbtn.attr('disabled', true)
    } else {
      $tip.hide()
      //    让登录按钮变为可点击
      $submitbtn.attr('disabled', false)
    }
  })
  
  //  提交登录按钮的事件click
  $submitbtn.on('click', function () {
    //  序列化表单数据
  var form = $loginForm.serialize()
   //   发送ajax
    $.ajax({
      type: 'POST',
      url: '/login',
      dataType: 'json',
      data: form
    }).done(function (data) {
      console.log(data)
      if (data.err) {
      //    如果有错误 那么错误框提示错误信息
        $tip_loginErr.show().html(data.msg)
      } else {
        //  登录成功跳转页面到报名表格
        window.location.href = '/'
      }
    }).fail(function (q) {
      console.log('请求失败')
    })
    
    
  })


</script>

</body>

</html>